<template>
  <div class="body">
    <div  class="head">
      <img
          src="/favicon.ico"
          alt="">
      <div class="search" v-if="isSearch" @click="router.push('/search')">
        <span>搜索商品</span> <span>🔍</span>
      </div>
      <span style="flex:1;font-size: 12px;color:black;font-weight: 700"> 星域VR</span>
      <div class="nav" v-if="flag">
        <span @click="Go('/index')">首页</span>
        <span @click="Go('/service')">服务</span>
        <span @click="Go('/my')" style="width: 230px;text-align: start;color:#909399
"><div>当前用户：{{ qq }}</div>
        <div>积分余额：{{ score }} | 已兑换游戏：{{ size }} </div></span>
      </div>
      <div class="login" v-if="!flag" style="margin-right: 30px;" @click="router.push('/login')">
        登陆｜注册
      </div>
    </div>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component v-if="1" :is="Component"/>
      </keep-alive>
<!--      <component v-if="!route.meta.keepAlive" :is="Component"/>-->

    </router-view>
    <van-tabbar route class="btm">
      <van-tabbar-item replace to="/index" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/online" icon="gem-o">在线kjhkhk</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import {ref, onMounted, inject,computed} from 'vue';
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
const axios = inject("axios")
const size = ref(0)
const path = route.path
const isSearch = ref(false)
const Go = (url) => {
  router.push(url)
}
const qq = ref('')
const score = ref('')
onMounted(() => {
  qq.value = window.localStorage.getItem("qq")
  flag.value = qq.value ? true : false
  if (route.path == '/index') isSearch.value = true
  if (flag.value) {
    axios.get("user/score?qq=" + qq.value).then(res => {
      score.value = res.data?.data
    }).catch(err => {
    })
    axios.get('record/count?qq=' + qq.value).then(res => {
      size.value = res.data?.data
    }).catch(er => {
    })
  }
})

const flag = ref(true)
</script>

<style scoped lang="less">
.body {
  font-size: 14px;
  display: flex;
  width: 100vw;
  flex-direction: column;
  router-view {
    flex: 1;
    width: 100%;
  }
}

.search {
  width: 62vw;
  margin-right:20px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px black solid;
  color: #A8ABB2;
  margin-left: 20px;
  padding: 10px;
  height: 25px;
  box-sizing: border-box;
}

.head {
 // position: fixed;
  height: 70px;
  align-items: center;

  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}

@media screen and(min-width: 480px) {
  .btm {
    display: none;
  }

  .head {
    img {
      width: 30px;
      height: 30px;
      margin-left: 20px;
    }


    .nav {
      font-size: 14px;
      display: flex;
      align-items: center;
      font-weight: 700;

      span {
        margin-right: 20px;
      }
    }

    .login {
      color: #909399;
      font-size: 14px;
    }
  }
}

@media screen and (max-width: 480px) {
  .nav,
  .login {
    display: none;
  }

  img {
    width: 30px;
    height: 30px;
  }

  .head {
    img {
      margin-left: 20px;
    }
  }
}
.btm{
  position: absolute;
  bottom: 0;

}

</style>
